<template>
  <div>
    <router-view v-slot="{ Component }" v-show="!routeflag">
      <transition name="fade" mode="out-in" appear>
        <component :is="Component" />
      </transition>
    </router-view>
    <div v-show="routeflag">
      <div class="top">
        <div class="top-left">
          <el-button style="background-color: #f56c6c" @click="backarchive">设置</el-button>
          <el-button style="background-color: #2752fb" @click="goReport">202311报表</el-button>
        </div>
      </div>
      <div class="content" style="margin-bottom: 10px;">
        <Report :bumendata="bumendata" :changesearch="changesearch" />
      </div>
      <div style="background-color: white;padding: 20px">
        <Wagestable :Wageslist="Wageslist"></Wagestable>
        <el-pagination layout="prev, pager, next" :total="Number(total)" v-model:current-page="page"
          v-model:page-size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getWagesList } from "../api/Wages";
import Wagestable from "../components/Wagestable.vue";
import { ref, onMounted, watchEffect } from "vue";
import Report from "@/components/Attendance/Report.vue";
import { addSocialTable } from '@/api/Socialtable'
import { useStore } from '@/stores/counter'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
let routeflag = ref(true)
watchEffect(() => {
  if (route.path == '/home/salary') {
    setTimeout(() => {
      routeflag.value = true
    }, 600)

  } else {
    routeflag.value = false
  }
})
const store = useStore()
let bumendata = ref([])
const Wageslist = ref([]);
const total = ref("");
const page = ref(1);
const pageSize = ref(10);
const render = () => {
  getWagesList(page.value, pageSize.value, store.$state.departmentChecks, store.$state.approvalsTypeChecks).then((res) => {
    total.value = res.data.data.total;
    Wageslist.value = res.data.data.rows;
  });
  addSocialTable().then(res => {
    bumendata.value = res.data.data
  })
};
const changesearch = () => {
  render()
}
onMounted(() => {
  render();
});
const handleSizeChange = (val: number) => {
  render();
};
const handleCurrentChange = (val: number) => {
  render();
};

const backarchive = () => {
  router.push('/home/salary/setting')
};
const goReport = () => {
  console.log("202311报表");
};
</script>

<style scoped>
@import '../assets/Wages.css';
</style>
